<template>
  <div class="yjImgPreview" v-show="show" @mouseup="rMouseup">
    <div class="c-main">
      <div class="c-list" :style="scaleStyle">
        <div
          class="c-item"
          v-for="(item, index) in pics"
          :key="index"
          @mousedown.prevent="rMousedown"
          @mousemove.prevent="rMousemove"
          :style="moveStyle"
          :class="showImg(index) ? 'active' : ''"
        >
          <img :src="item" alt="" />
        </div>
      </div>
    </div>
    <el-button
      icon="el-icon-arrow-left"
      circle
      class="c-btnSwitch c-btn-prev"
      :disabled="isFirst"
      @click="rPrev"
    ></el-button>
    <el-button
      icon="el-icon-arrow-right"
      circle
      class="c-btnSwitch c-btn-next"
      :disabled="isLast"
      @click="rNext"
    ></el-button>
    <div class="c-btns">
      <el-button-group>
        <el-button
          icon="el-icon-zoom-out"
          circle
          type="primary"
          :disabled="isMin"
          @click="rMin"
        ></el-button>
        <el-button
          icon="el-icon-refresh-left"
          circle
          type="primary"
          @click="reset"
        ></el-button>
        <el-button
          icon="el-icon-zoom-in"
          circle
          type="primary"
          :disabled="isMax"
          @click="rMax"
        ></el-button>
      </el-button-group>
      <el-button
        icon="el-icon-circle-close"
        circle
        type="info"
        @click="rClose"
      ></el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "yjImgPreview", // 这里需要注意下，我们是采用的全局注入我们的组件，所以在后面因为我们的组件后，会直接使用这个命名的标签
  props: {
    pics: {
      type: Array
    },
    show: {
      type: Boolean,
      default: false
    },
    initIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentIndex: 0, // 当前图片
      currentScale: 1, // 当前比例
      moveStyle: {},
      isMove: false,
      startX: 0,
      startY: 0,
      endX: 0,
      endY: 0,
      currentX: 0,
      currentY: 0,
      oldX: 0,
      oldY: 0
    };
  },
  watch: {
    show: function() {
      if (this.show) {
        this.currentIndex = this.initIndex;
      }
    }
  },
  computed: {
    isFirst: function() {
      if (this.currentIndex < 1) {
        return true;
      }
      return false;
    },
    isLast: function() {
      if (this.currentIndex == this.pics.length - 1) {
        return true;
      }
      return false;
    },
    isMax: function() {
      if (this.currentScale >= 10) {
        return true;
      }
      return false;
    },
    isMin: function() {
      if (this.currentScale <= 0.1) {
        return true;
      }
      return false;
    },
    scaleStyle: function() {
      return {
        transform: "scale(" + this.currentScale + ", " + this.currentScale + ")"
      };
    }
  },
  methods: {
    showImg(index) {
      return this.currentIndex === index;
    },
    rNext() {
      if (this.currentIndex < this.pics.length - 1) {
        this.currentIndex++;
        this.reset();
      }
    },
    rPrev() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
        this.reset();
      }
    },
    reset() {
      // 重置缩放
      this.currentScale = 1;
      // 重置移动
      this.startX = this.startY = this.endX = this.endY = this.oldX = this.oldY = 0;
      this.getStyle();
    },
    rMax() {
      if (this.currentScale <= 10) {
        this.currentScale += 0.1;
      }
    },
    rMin() {
      if (this.currentScale >= 0.1) {
        this.currentScale -= 0.1;
      }
    },
    rClose() {
      this.$emit("close");

      this.currentScale = 1;
      this.currentIndex = 0;
    },
    rMousedown(ev) {
      this.isMove = true;
      this.startX = ev.pageX;
      this.startY = ev.pageY;
    },
    rMousemove(ev) {
      if (!this.isMove) {
        return;
      }
      this.endX = ev.pageX;
      this.endY = ev.pageY;

      this.getStyle();
    },
    rMouseup() {
      this.isMove = false;
      this.oldX = this.currentX;
      this.oldY = this.currentY;
    },
    getStyle() {
      this.currentX = this.endX - this.startX + this.oldX;
      this.currentY = this.endY - this.startY + this.oldY;
      this.moveStyle = {
        transform: "translate(" + this.currentX + "px, " + this.currentY + "px)"
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.yjImgPreview {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.6);
  .c-main {
    position: absolute;
    left: 100px;
    top: 100px;
    right: 100px;
    bottom: 100px;
    overflow: hidden;
    .c-list {
      position: relative;
      // display: flex;
      width: 100%;
      height: 100%;
      margin: 0 auto;
      // justify-content: center;
      // align-items: center;
      // text-align: center;
    }
    .c-item {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      img {
        max-width: 100%;
        max-height: 100%;
      }
    }
    .active {
      z-index: 100;
      opacity: 1;
    }
  }
  .c-btnSwitch {
    position: absolute;
    top: 45%;
    z-index: 1000;
    text-align: center;
  }
  .c-btn-prev {
    left: 20px;
  }
  .c-btn-next {
    right: 20px;
  }
  .c-btns {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    z-index: 1000;
    text-align: center;
  }
}
</style>
